﻿@using Aspire.Dashboard.Resources
@using Aspire.Dashboard.Utils
@inject IStringLocalizer<ControlsStrings> Loc
@inject IStringLocalizer<Dialogs> DialogsLoc

<div class="@GetContainerClass()" style="width: inherit;">

    @* Value area *@

    @if (EnableMasking && IsMasked)
    {
        <span class="grid-value masked" id="@_cellTextId">
            @DashboardUIHelpers.GetMaskingText(length: 8).MarkupString
        </span>
    }
    else
    {
        <span class="grid-value" title="@(ToolTip ?? Value)" id="@_cellTextId">
            @if (ContentBeforeValue == null && ContentAfterValue == null && string.IsNullOrEmpty(Value))
            {
                <span class="empty-data"></span>
            }
            else
            {
                @ContentBeforeValue
                if (ComponentMetadata is not null)
                {
                    <DynamicComponent Type="@ComponentMetadata.Type"
                                      Parameters="@BuildComponentParameters()" />
                }
                else if (ValueTemplate is not null)
                {
                    @ValueTemplate(Value)
                }
                else if (EnableHighlighting && !string.IsNullOrEmpty(HighlightText))
                {
                    <FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
                }
                else if (_formattedValue != null)
                {
                    @((MarkupString)_formattedValue)
                }
                @ContentAfterValue
            }
        </span>
    }

    @* Button area *@

    <div @onclick:stopPropagation="true" class="button-container">

        <span class="defaultHidden">
            <FluentButton Appearance="Appearance.Lightweight"
                          Disabled="@(ValueToVisualize is null && Value is null)"
                          OnClick="OpenTextVisualizerAsync"
                          aria-label="@DialogsLoc[nameof(Dialogs.OpenInTextVisualizer)]">
                <FluentIcon Icon="Icons.Regular.Size16.SlideSearch" />
            </FluentButton>
        </span>

        @if (ContentInButtonArea is not null)
        {
            @ContentInButtonArea
        }

        @if (EnableMasking)
        {
            <FluentButton Appearance="Appearance.Lightweight"
                          IconEnd="@(IsMasked ? _unmaskIcon : _maskIcon)"
                          Title="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])"
                          OnClick="ToggleMaskStateAsync"
                          aria-label="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])"
                          Class="grid-value-mask-button" />
        }

    </div>
</div>
